<template>
  <q-drawer elevated show-if-above :width="250">
    <el-scrollbar>
      <el-menu :collapse="isCollapse" :collapse-transition="false" :default-active="active" class="border-r-0 w-full"
        unique-opened @select="selectMenuItem">
        <template v-for="item in routerStore.asyncRouters[0].children">
          <aside-component v-if="!item.hidden" :key="item.name" :router-info="item" />
        </template>
      </el-menu>
    </el-scrollbar>
  </q-drawer>
</template>

<script setup>
import AsideComponent from "./asideComponent/index.vue";
import { ref, provide, watchEffect, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useRouterStore } from "@/amtf/stores/use_router_store";

const route = useRoute();
const router = useRouter();
const routerStore = useRouterStore();
const isCollapse = ref(false);
const active = ref("");

watchEffect(() => {
  active.value = route.meta.activeName || route.name;
});


const selectMenuItem = (index, _, ele, aa) => {
  const query = {};
  const params = {};
  routerStore.routeMap[index]?.parameters &&
    routerStore.routeMap[index]?.parameters.forEach((item) => {
      if (item.type === "query") {
        query[item.key] = item.value;
      } else {
        params[item.key] = item.value;
      }
    });
  if (index === route.name) return;
  if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
    window.open(index);
  } else {
    router.push({ name: index, query, params });
  }
};

</script>

<style lang="scss"></style>
